<script setup>
import {
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
const handleOpen = (key, keyPath) => {
  console.log("handleOpen", key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log("handleClose", key, keyPath);
};
</script>
<template>
  <div>
    <el-row>
      <el-col :span="6" :offset="8">Vue3的组件通信</el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <h5 class="mb-2">联系vue3组件通信的菜单</h5>
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
          text-color="#fff" @open="handleOpen" @close="handleClose" :router="true">
          <el-menu-item index="/communication/props">
            <el-icon>
              <location />
            </el-icon>
            <span>props传递普通值和函数</span>
          </el-menu-item>
          <el-menu-item index="/communication/customEvent">
            <el-icon><icon-menu /></el-icon>
            <span>自定义事件</span>
          </el-menu-item>
          <el-menu-item index="/communication/mitt">
            <el-icon><icon-menu /></el-icon>
            <span>mitt发布订阅</span>
          </el-menu-item>
          <el-menu-item index="/communication/model">
            <el-icon><icon-menu /></el-icon>
            <span>v-model</span>
          </el-menu-item>
          <el-menu-item index="/communication/attrs">
            <el-icon><icon-menu /></el-icon>
            <span>$attrs爷孙组件传递数据</span>
          </el-menu-item>
          <el-menu-item index="/communication/refsParent">
            <el-icon><icon-menu /></el-icon>
            <span>$refs(父——子),$parent(子——父)</span>
          </el-menu-item>
          <el-menu-item index="/communication/provideInject">
            <el-icon><icon-menu /></el-icon>
            <span>provide,inject</span>
          </el-menu-item>
          <el-menu-item index="/communication/pinia">
            <el-icon><icon-menu /></el-icon>
            <span>pinia</span>
          </el-menu-item>
          <el-menu-item index="/communication/slot">
            <el-icon>
              <setting />
            </el-icon>
            <span>插槽solt</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="12"> <router-view /> </el-col>
    </el-row>
  </div>
</template>

<style scoped></style>